<template>
	<view class="main">
		<!-- <view class="search-wrap" id="search">
			<view class="search-box-content">
				<input class="input-search" type="text" v-model.lazy="inputVal" placeholder-class="input-search-placeholder" placeholder="请输入老师姓名" @confirm="search">
				<text class="icon iconjujue" :class="{'hidden':!inputVal.length}" @click="clearText"></text>
			</view>
			<text class="btn-search" @click="search">搜索</text>
		</view> -->
		<uni-search-bar placeholder="请输入老师姓名" cancelText="搜索" radius="30" bgColor="#FAFAFA" borderColor="#FAFAFA" @cancel="cancel"  @confirm="confirm" />
		<div class="no-find" v-if="teacher_list.length==0">
			<image src="/static/image/lesson-no-find-box.png" mode=""></image>
			<div class="tip">未查询到任何内容~</div>
		</div>
		<scroll-view scroll-y="true" class="scroll-wrap" :style="'height:'+scroll_height" v-else>
			<view class="item" v-for="(item, i) in teacher_list" :key="i">
				<v-recommend-teacher :mclass="'card'" :teacher="item"></v-recommend-teacher>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import recommendTercher from './components/recommend-tercher.vue'
	import msearch from '@/components/m-search/m-search.vue'
	export default {
		components: {
			vRecommendTeacher: recommendTercher,
			mSearch: msearch
		},
		data() {
			return {
				scroll_height: 'auto',
				windowHeight: 0,
				inputVal: '',
				teacher_list: [], // 教师列表
				isMore: false,
				isNoMore: false, // 没有更多数据
				page: 1, // 页数
			}
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {
			if (this.isNoMore) return
			uni.showLoading({
				title: '加载中...'
			})
			this.isMore = true
			setTimeout(() => {
				this.getData({
					teacher_name: this.inputVal,
					limit: 10,
					page: ++this.page
				})
			}, 500)
		},
		methods: {
			// 获取数据
			// obj: 请求参数
			getData(obj = {}) {
				this.$zbapi.apiPost('stu/teacher/infos/0', obj).then(res => {
					uni.hideLoading()
					if (res.data.code == 0 && res.data.data.list.length > 0) {
						if (this.isMore) {
							this.teacher_list = this.teacher_list.concat(res.data.data.list)
						} else {
							this.teacher_list = res.data.data.list
							this.isMore = false
							this.page = 1
						}
					} else {
						if (!this.isMore) {
							this.teacher_list = []
						} else {
							this.isNoMore = true
							this.showToast('无更多数据~')
						}
					}
				}).catch(err => {
					this.showToast('服务器出错啦~')
				})
			},
			
			search(){
				this.closeState()
				uni.showLoading({title: '搜索中...'})
				setTimeout(() => {
					this.getData({
						teacher_name: this.inputVal,
						limit: 10,
					})
				}, 500)
			},
			// 取消状态
			closeState() {
				this.isMore = false
				this.isNoMore = false
				this.page = 1
				this.teacher_list = []
			},
			// 清空搜索
			clearText() {
				this.inputVal = ''
				this.closeState()
				this.getData()
			},
			showToast(title, icon = 'none') {
				uni.showToast({
					title,
					icon
				})
			},
			cancel(e){
				this.inputVal = '';
				this.closeState()
				uni.showLoading({title: '搜索中...'})
				this.getData({
					teacher_name: this.inputVal,
					limit: 10
				})
			},
			// 搜索
			confirm(e) {
				this.inputVal = e.value;
				if(this.inputVal){
					this.closeState()
					uni.showLoading({title: '搜索中...'})
					this.getData({
						teacher_name: this.inputVal,
						limit: 10
					})
				}else{
					uni.showToast({
						title: '请输入老师名称再搜索',
						icon:'none'
					});
				}
			}
		},
	}
	
</script>

<style>
	
page{background: #F7F7F7;}
.iconjujue{transition: all 0.2s linear; width: auto; height: auto; position: absolute; right: 8upx; top: 0; color: #999; font-size: 30upx; font-family: iconfont;}

.no-find {display: flex; flex-direction: column; align-items: center;margin-top: 50%;}
.no-find uni-image {width: 322upx; height: 202upx;}
.no-find .tip {font-size:28upx;font-family:Source Han Sans CN;font-weight:400;color: #999999;margin-left: 40upx;margin-top: 20upx;}

.btn-search {color: #666666;}

.search-wrap{display:flex; height: 88upx; padding:16upx 30upx;background: #FFF;align-items: center;}
.search-wrap .input-search{height: inherit;}
.search-wrap .search-box-content{ width: 100%; position: relative; background:#FAFAFA; flex:1; height:56upx; text-indent:1em;border-radius: 4upx; color: #999;font-size: 28upx;}
.search-wrap .input-search .input-search-placeholder{font-size:26upx;font-family:Source Han Sans CN;color: #ccc;}
.search-wrap .btn-search{margin-left: 20upx; color:#CCC;font-size: 28upx;}


.scroll-wrap{white-space:wrap; width: 100%; margin-top:160upx;}
.scroll-wrap .item{display:inline-block; width: 100%;}
.scroll-wrap .item .card{border-radius: 20upx; width: auto; margin: 0 30upx 20upx 30upx;background: #fff;}

.hidden{opacity: 0;}
</style>
